<div id="reports-widget-drawer" class="cly-drawer">
    <div class="title">
        <span id="reports-widget-drawer-create-title" data-localize='reports.create_new_report_title'></span>
        <span id="reports-widget-drawer-edit-title" data-localize='reports.edit_report_title'></span>
        <div class="close"><i id='reports-widge-close' class="ion-ios-close-empty"></i></div>
    </div>

    <div class="details">
        <input type="text" id="current_report_id" hidden/>

        <div class="section">
            <div class="label" data-localize='reports.report_name' ></div>
            <div>
                <input id="report-name-input" class="input" type="text" >
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.emails-title' ></div>
            <select id="email-list-input" placeholder="{{email-placeholder}}">
            </select>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.frequency' ></div>
            <div id="reports-frequency" class="checks">
                <div id="daily-option" class="check selected">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.daily'></div>
                    <div class="description"  data-localize='reports.daily-description'></div>
                 </div>
                <div id="weekly-option" class="check">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.weekly'></div>
                    <div class="description"  data-localize='reports.weekly-description'></div>
                 </div>
                 <div id="monthly-option" class="check">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.monthly'></div>
                    <div class="description"  data-localize='reports.monthly-description'></div>
                 </div>
            </div>
        </div>

        <div class="section" id="reports-dow-section" >
            <div class="label" data-localize='reports.dow' ></div>
            <div id="reports-dow" class="cly-select" style="width: 100%; box-sizing: border-box;">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.select_dow'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.time_desc' ></div>
            <div id="reports-time-dropdown" class="cly-select" style="width: 100%; box-sizing: border-box;">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.select_time'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.timezone' ></div>
            <div id="reports-timezone-dropdown" class="cly-select" style="width: 100%; box-sizing: border-box;">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.select_timezone'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize="reports.report-type"></div>
            <div id="report-types">
                <div class="opts">
                    <div data-report-type="core" class="opt cly-grid-3 selected">
                        <div class="inner">
                            <span class="icon core"></span>
                            <span data-localize="reports.core"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.apps_desc'></div>
            <div id="reports-multi-app-dropdown" class="cly-multi-select" style="width: 100%; box-sizing: border-box;">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.Select_apps'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section" style="margin-bottom:50px">
            <div class="label" data-localize='reports.include-metrics'></div>
            <div class="include-metrics">
                <div class="metrics-checkbox-line">
                    <label class="container">
                        <input id="reports-metrics-analytics"  type="checkbox" style=" width: 10px; height:10px;">
                        <span class="fa check-green fa-square-o"></span>
                        <span data-localize='reports.analytics'></span>
                    </label>
                </div>
                <div class="metrics-checkbox-line">
                    <label class="container">
                            <input id="reports-metrics-revenue"  type="checkbox">
                            <span class="fa check-green fa-square-o"></span>
                            <span data-localize='reports.revenue'></span>
                    </label>
                </div>
            </div>
            <div class="include-metrics">
                <div class="metrics-checkbox-line">
                    <label class="container">
                            <input id="reports-metrics-events"  type="checkbox">
                            <span class="fa check-green fa-square-o"></span>
                            <span data-localize='reports.events'></span>

                    </label>
                </div>
                <div class="metrics-checkbox-line">
                    <label class="container">
                            <input id="reports-metrics-crash"  type="checkbox">
                            <span class="fa check-green fa-square-o"></span>
                            <span data-localize='reports.crash'></span>

                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="buttons">
            <div id="reports-create-widget" class="icon-button green" data-localize='reports.Create_New_Report'></div>
            <div id="reports-save-widget" class="icon-button green" data-localize='reports.Save_Changes'></div>
    </div>
</div>

